import 'package:demo202112/utils/common_appbar.dart';
import 'package:flutter/material.dart';

class MyTween extends StatefulWidget {
  const MyTween({Key? key}) : super(key: key);

  @override
  _MyTweenState createState() => _MyTweenState();
}

class _MyTweenState extends State<MyTween> with TickerProviderStateMixin{
  late Animation<double> animation;
  late AnimationController controller;

  late Animation<Color?> animationColor;
  late AnimationController controllerColor;

  @override
  initState() {
    super.initState();
    controller = AnimationController(duration: Duration(milliseconds: 2000),vsync: this);
    animation = (Tween(begin: 0.0,end: 300.0).animate(controller)
    ..addListener(() {
      setState(() {
        if(controller.isCompleted){
          // controller.reset();
          controller.reverse();
        }
        else if(controller.isDismissed){
          controller.forward();
        }
      });
    }));
    controller.forward();
   //颜色渐变动画
    controllerColor = AnimationController(duration: Duration(milliseconds: 2000),vsync: this);
    animationColor = ColorTween(begin: Colors.transparent,end: Colors.black87).animate(controllerColor)
    ..addListener(() {
      setState(() {
        if(controllerColor.isCompleted){
          // controller.reset();
          controllerColor.reverse();
        }
        else if(controllerColor.isDismissed){
          controllerColor.forward();
        }
      });
    });

    controllerColor.forward();


  }
  @override
  void dispose() {
    controller.dispose();
    controllerColor.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: getAppBar('Teen'),
      body: Column(children: [
        Center(
          child: Container(
            margin: EdgeInsets.symmetric(vertical: 10.0),
            // 使用 CurvedAnimation 对象的 value
            height:  animation.value,
            width: animation.value,
            child: FlutterLogo(),
          ),
        ),
        Center(
          child: Container(
            height: 100,
            width: 100,
            margin: EdgeInsets.symmetric(vertical: 10.0),
            // 使用 CurvedAnimation 对象的 value
           color: animationColor.value!,
            child: FlutterLogo(),
          ),
        )
      ],),
    );
  }
}
